<template>
  <div class="form-block">
    <div class="form-label">
      <label :for="id">{{label}}</label>
    </div>
    <div class="input-group-wrap">
      <div class="input-group">
        <input v-if="!textarea" :type="type" :value="value" :placeholder="placeholder" :id="id">

        <textarea v-else :type="type" :placeholder="placeholder" :value="value" :id="id" @input="$emit('input',$event.target.value)" :rows="2" maxlength="100"></textarea>
        <i v-if="icon" :class="'fa fa-'+icon"></i>
      </div>
    </div>
  </div>
</template>

<script>

export default {
  name: 'FormBlock',
  props: {
    label: String,
    placeholder: String,
    value: String,
    type: {
      type: String,
      default: 'text'
    },
    id: String,
    textarea: String,
    icon: String
  }
}
</script>

<style lang="less" scoped>
.form-block {
  display: flex;
  flex-wrap: wrap;
  background-color: #fff;
  padding: 20px 10px;
  border-bottom: 1px solid #ccc;
  .form-label {
    label {
      display: inline-block;
      width: 70px;
      font-weight: 700;
      text-align: center;
      font-size: 18px;
    }
  }
  .input-group-wrap {
    flex: 1;
    .input-group {
      position: relative;
      input {
        border: none;
        outline: none;
        width: 100%;
      }
      textarea {
        border: none;
        width: 100%;
        outline: none;
      }
      i {
        position: absolute;
        top: 17px;
        right: 10px;
        transform: translate(0, -90%);
      }
    }
  }
}
</style>
